<template>
	<div class="mycentertop">
		<div class="mycenterhead">
			<img src="img/arrowleft.png" @click="back()"/>
			<span>账号管理</span>
			<span class="focus"></span>
		</div>
		<div class="mylogo">
			<h3>迷鹿***OY</h3>
			<p>智能保障您的账号安全
				<img src="img/anquan.png"/>
			</p>
			<img src="img/logo3.png" class="logo"/>
		</div>
		<div class="score">
			<h5>95</h5>
			<div class="star">
				<img src="img/star.png" />
				<img src="img/star.png" />
				<img src="img/star.png" />
				<img src="img/star.png" />
			</div>
			<p>账号安全状况良好<br/>请继续完善</p>
			<i>检测</i>
		</div>
	</div>
</template>

<script>
	export default{
		methods:{
			back(){
				this.$router.go(-1);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.mycentertop{
		background-color: #FFFFFF;
		.mycenterhead{
			width: calc(100% - 0.3rem);
			padding: 0 0.15rem;
			height: 0.5rem;
			line-height: 0.5rem;
			position: relative;
			border-bottom: 2px solid #ebebeb;
			img{
				position: absolute;
				left: 0.15rem;
				top: 50%;
				transform: translateY(-50%);
			}
			span{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				font-size: 0.18rem;
			}
		}
		.mylogo{
			width: calc(100% - 0.3rem);
			padding: 0 0.15rem;
			height: 1.2rem;
			position: relative;
			overflow: hidden;
			h3{
				font-size: 0.24rem;
				margin-top: 0.4rem;
			}
			p{
				font-size: 0.14rem;
				margin-top: 0.04rem;
			}
			.logo{
				position: absolute;
				right: 0.15rem;
				top: 0.4rem;
			}
		}
		.score{
			width: calc(100% - 0.3rem);
			margin-left: 0.15rem;
			height: 0.9rem;
			background-color: #47c0f7;
			border-radius: 0.1rem;
			position: relative;
			overflow: hidden;
			h5{
				color: #ffffff;
				line-height: 0.9rem;
				float: left;
				font-size: 0.45rem;
				margin-left: 0.2rem;
				font-weight: normal;
			}
			.star{
				position: absolute;
				width: 0.7rem;
				height: 0.2rem;
				top: 0.2rem;
				left: 0.9rem;
				img{
					position: absolute;
					top: 0;
				}
				img:nth-of-type(1){
					left: 0.15rem;
				}
				img:nth-of-type(2){
					left: 0.3rem;
				}
				img:nth-of-type(3){
					left: 0.45rem;
				}
			}
			p{
				font-size: 0.13rem;
				margin-top: 0.37rem;
				margin-left: 0.9rem;
				color: #FFFFFF;
			}
			i{
				width: 0.65rem;
				height: 0.32rem;
				background-color: #FFFFFF;
				display: block;
				color: #0f93de;
				font-size: 0.14rem;
				position: absolute;
				top: 0.28rem;
				right: 0.15rem;
				line-height: 0.32rem;
				text-align: center;
				font-style: normal;
				border-radius: 0.15rem;
			}
		}
	}
</style>









